<template>
    <zh-form ref="userFrom" :rowFlag="false" :model="form" :labelCol="labelColBase" :wrapperCol="wrapperColBase" :rules="rules">
        <zh-card title="基本信息">
            <zh-row :span="8">
                <zh-input prop="userName" label="用户名" v-model="form.userName" ></zh-input>
                <zh-input prop="cardType" type="select"  label="证件类型"  placeholder="单选" allowClear  :options="dictData.cardType" v-model="form.cardType" ></zh-input>  
                <zh-input prop="idcard" label="证件号码" v-model="form.idcard" ></zh-input>
                <zh-input prop="fullName" label="姓名" v-model="form.fullName" ></zh-input>
                <zh-input prop="sex" type="select"  label="性别"  placeholder="单选" allowClear  :options="dictData.sex" v-model="form.sex" ></zh-input>  
                <zh-input prop="birthday"  type="date" label="出生日期" format="YYYY-MM-DD" v-model="form.birthday"></zh-input>
                <zh-input prop="cellphone" label="手机号码" v-model="form.cellphone" ></zh-input>
                <zh-input prop="officePhone" label="办公室电话" v-model="form.officePhone" ></zh-input> 
                <zh-input prop="shortPhone" label="手机短号" v-model="form.shortPhone" ></zh-input>  
                <zh-input prop="email" label="邮箱" v-model="form.email" ></zh-input>
                <zh-input prop="userType" :disabled="userTypeDisabled" type="select"  label="用户类型"  placeholder="单选" allowClear  :options="dictData.userType" v-model="form.userType" ></zh-input>  
                <zh-input prop="status" type="select"  label="状态"  placeholder="单选" allowClear  :options="statusData" v-model="form.status" ></zh-input>  
                <zh-input prop="orgId" type="tree" label="所属组织"  placeholder="单选"
                      treeNodeFilterProp="title"
                      allowClear
                      treeDefaultExpandAll
                      v-model="form.orgId"
                      :treeData="orgSelectTreeData"
                      >
                </zh-input>
                <zh-input prop="appName" type="search"  label="所属应用" v-model="form.appName" :searchFormatField="['appName', 'clientId']" :defaultFields="{label: 'appName',value: 'clientId'}"
                    :showSearchField="['appName']" :searchUrl="applicationUrl" searchField="appName" @cell-click="searchClientClick"></zh-input>     
                 <zh-input prop="realFlag" type="select"  label="是否实人认证"  placeholder="单选" allowClear  :options="flagData" v-model="form.realFlag" ></zh-input>  
            </zh-row>
        </zh-card>
        <zh-card title="其他">
            <zh-row :span="8">
                <zh-input prop="nikeName" label="昵称" v-model="form.nikeName" ></zh-input>  
                <zh-input prop="orderNo" type="number" label="排序" v-model="form.orderNo" ></zh-input>  
                <zh-input prop="userIp" label="用户ip" v-model="form.userIp" ></zh-input> 
                <zh-input :span="24" prop="addressDetail" label="地址" v-model="form.addressDetail" :labelCol="labelCol" :wrapperCol="wrapperCol" ></zh-input> 
                <zh-upload :span="8"  label="头像"  :defaultImageList="imgUrlList" @handleChange="imgChange">
                </zh-upload>
                <zh-input :span="16" :rows="4" prop="remarks" type="textarea"  label="备注" v-model="form.remarks" :labelCol="labelCol16" :wrapperCol="wrapperCol16"></zh-input>        
            </zh-row>
        </zh-card>
    </zh-form>
</template>

<script>
import { getBatchDict, getOrgSelectTree,getUserDetail,fileShowUrl } from "@/services/system/api"
import moment from 'moment'
import validate from '@/utils/validate.js'
export default {
  data () {
    return {
      statusData:[{dictKey:'1',dictValue:'启用'},{dictKey:'0',dictValue:'禁用'}],
      flagData:[{dictKey:'1',dictValue:'是'},{dictKey:'0',dictValue:'否'}],
      labelColBase:{sm: { span: 8 },md: { span: 8 },xs: { span: 24 },lg: { span: 9 },xl: { span: 9 },xxl: { span: 9 }},
      wrapperColBase:{sm: { span: 16 },md: { span: 16 },xs: { span: 24 },lg: { span: 15 },xl: { span: 15 },xxl: { span: 15 }},
      labelCol:{sm: { span: 8 },md: { span: 4 },xs: { span: 24 },lg: { span: 3 },xl: { span: 3 },xxl: { span: 3 }},
      wrapperCol:{sm: { span: 16 },md: { span: 20 },xs: { span: 24 },lg: { span: 21 },xl: { span: 21 },xxl: { span: 21 }},
      labelCol16:{sm: { span: 8 },md: { span: 5 },xs: { span: 24 },lg: { span: 5 },xl: { span: 5},xxl: { span: 5 }},
      wrapperCol16:{sm: { span: 16 },md: { span: 19 },xs: { span: 24 },lg: { span: 19 },xl: { span: 19 },xxl: { span: 19 }},
      rules: {
        userName:[
            { required: true, message: '请输入用户名', whitespace: true }
        ],
        cardType:[
           { required: false, message: '请选择证件类型'}
        ],
        idcard:[
           { required: false, message: '请输入证件号码', whitespace: true}, 
           { validator: this.checkIdcard , trigger: 'change'}
        ],
        fullName:[
           { required: false, message: '请输入姓名', whitespace: true}
        ],
        cellphone:[
            { required: false, message: '请输入手机号码', whitespace: true, pattern: /^1[3456789]\d{9}$/},
            { message: '请输入正确的手机号码',  pattern: /^1[3456789]\d{9}$/}
        ],
        email: [{ required: false, type: 'email', message: '请输入邮箱地址' }],
        userType:[
           { required: true, message: '请选择用户类型'}
        ],
        status:[
           { required: true, message: '请选择用户状态'}
        ],
        // orgId:[
        //    { required: true, message: '请选择所属组织'}
        // ],
      },
      userTypeDisabled:true,
      imgUrlList:[],
      applicationUrl:'',
      confirmLoading: false,
      dictData: {},
      orgSelectTreeData:[],
      form: {userName:undefined,cardType:'01',idcard:undefined,fullName:undefined,sex:undefined,birthday:undefined,cellphone:undefined,officePhone:undefined,shortPhone:undefined,email:undefined,userType:'10',status:'1',orgId:undefined,orgName:undefined,appName:undefined,realFlag:'1',nikeName:undefined,orderNo:undefined,userIp:undefined,addressDetail:undefined,remarks:undefined},
    }
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  created () {
    // 数据初始化
    if(this.userInfo){
        if(this.userInfo.userType){
            this.userTypeDisabled=true
            this.form.userType=this.userInfo.userType
        }else{
            this.userTypeDisabled=false
        }
        if(this.userInfo.userId){
            let userParams={}
            userParams.userId=this.userInfo.userId
            this.$http.post(getUserDetail, userParams).then(res => {
                let form = Object.assign(this.form,res.result)
                if (form.avatarShowId) {
                    let imgUrlList = []
                    let param = {}
                    param.url = fileShowUrl+form.avatarShowId
                    let uuid='avatar'
                    param.name = uuid + ".jpg"
                    param.uid = uuid
                    param.status = 'done'
                    imgUrlList.push(param)
                    this.imgUrlList = imgUrlList
                }
                this.form = form
            })
        }
        
    }else{
        this.userTypeDisabled=false
    }
    // 数据字典初始化
    const params = {}
    // 下拉组织树初始化
    this.$http.post(getOrgSelectTree, params).then(res => {
      this.orgSelectTreeData = res.result
    })
    params.dictFields = 'userType,sex,cardType'
    this.$http.post(getBatchDict,params).then(res => {
      this.dictData = res.result
    })
    
  },
  methods: {
    moment,
    checkIdcard (rule, value, callback) {
        if (!value) {
            callback()
            return
        }
        if (this.form.cardType==='01'&&!validate.isIdcard(value)) {
            callback(new Error('请输入正确的身份证'))
        }else{
            callback()
        }
    },
    searchClientClick(row){
        this.form.clientId=row.clientId
    },
    imgChange(e){
        this.form.photoPath = e.map(item => {
            return item.url
        })    
        this.form.avatarShowId = e.map(item => {
            return item.showId
        })  
    },
    checkForm(){
        let flag=true
        this.$refs.userFrom.validate(valid => {
            if(valid){
                flag=true
            }else{
                flag=false
            }
        });
        return flag
    }
  }
}
</script>
